<script setup>
import {
Right,
Back
} from '@element-plus/icons-vue'
import login from '../api/login.js'
import {useRouter} from 'vue-router'
import {ref , reactive} from 'vue';
import { useUserStore  } from '../stores/user'
  let userInform = useUserStore();
  userInform.clearStyle()
  const user = ref(
    {
      username : "" ,
      password : "" 
    }
  )
  const use = useRouter();
  const error_message = ref("")
  let center = 0 ;

  function request (){
    if(user.value.username == "" || user.value.password == "")
    {
      ElNotification({
          title: '登录失败',
          message: '用户或密码是空项',
          type: 'error',
        })
    }
    else {
      login({
          username : user.value.username,
          password : user.value.password
      }).then((res) => {
        if(res.status == 200)
        {
          localStorage.setItem("jwttoken",res.data.jwttoken);
          use.push("/");
        }
        else
        {
          ElNotification({
          title: '登录失败',
          message: '检查密码或用户名是否输入错误',
          type: 'error',
          })
        }
      })
    }
    }
    
    function back () {
      use.back() ;
    }

    function forward() {
      use.push("/register")
    }
  </script>

<template>
<div  class="bg">
<nav> 
  <el-link :underline="false" size="large" style="position: relative; left: 2%; top: 1.8rem;" @Click="back"  ><el-icon color ="white" size="large"><Back /></el-icon></el-link>
  <el-link :underline="false" @Click="forward" style="position: fixed; top: 2.3rem; right: 6rem; text-align: center; color: #fff;" >没有账号？注册：<el-icon color ="white" size="large"><Right /></el-icon></el-link>
</nav>
<div class="big-box">
<div class="login-box">
  <h2>HIVE INFORM</h2>
  <form>
    <div class="user-box">
      <input v-model="user.username" type="username" name="" required="" aria-labelledby="false">
      <label>用户</label>
    </div>
    <div class="user-box">
      <input v-model="user.password" type="password" name="" required="" aria-labelledby="false">
      <label>密码</label>
    </div>
  </form>
</div>
<div class="button-box">
<el-row class="mb-4">
  <div class="error"> {{ error_message }}</div>
  <el-button style="position: absolute; left: -2rem; top:5rem ; width: 4rem; height: 4rem;" :icon="Right" circle @Click="request()"></el-button>
</el-row>
</div>
</div>
</div>
</template>
<style>
  @import url("@/css/login.css");
</style>